<template>
  <view class="template-group tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" :backgroundColor="navBarBackgroundColor" id="navbar">
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack" :style="[navBarStyle]">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-discover-fill'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle2]">
        <view class="tn-text-bold tn-text-xl">{{info.title}}</view>
      </view>
    </tn-nav-bar>
    
    <swiper class="card-swiper" :circular="true"
      :autoplay="true" duration="500" interval="28000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :style="'background-image:url(' + item.url + ');'" v-if="item.type=='image'"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
    <!-- 头部start-->
    <view class="shop-function tn-margin-bottom-xl" style="padding-top: 8px;">
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <view class="tn-color-white" style="width: 50vw;">
              <view class="tn-padding-right tn-padding-left-sm tn-text-xl tn-text-bold">
                {{info.title}}
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-text-sm">
                <text class="tn-padding-right-sm">{{info.timbre}}</text>
                <!-- <text>二次元大大的福利圈子</text> -->
              </view>
            </view>
          </view>
        </view>
        <view class="justify-content-item tn-flex-row-center" @click="showModal">
          <view class="tn-padding-xs tn-color-white tn-round tn-shadow-blur">
            <!-- <text class="tn-icon-qr-code tn-padding-xs tn-text-xxl"></text> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 头部 end-->
    
    <tn-modal v-model="show1" :custom="true">
      <view class="custom-modal-content">
        <!-- <image @tap="previewQRCodeImage" src='https://resource.tuniaokj.com/images/advertise/qrcode.jpg' mode='aspectFill' style="width: 100%;"></image> -->
        <view class="tn-text-center tn-padding-top">欢迎加入【热血动漫】圈子群</view>
        <view class="tn-text-center tn-padding-top tn-text-lg">点击上图，可识别微信二维码</view>
      </view>
    </tn-modal>
    
    <view class="group-wrap tn-color-white" id="page_tips">
	  <view class="input-box">
      <view class="user-number">
        <view class="user-number-item-content">
          <!-- <view class="user-number-item">
            <view class="user-number-item-number">0</view>
            <view class="user-number-item-title">获赞</view>
          </view> -->
          <view class="user-number-item">
            <view class="user-number-item-number tn-color-white">{{info.link_num}}</view>
            <view class="user-number-item-title tn-color-white">链接</view>
          </view>
          <view class="user-number-item">
            <view class="user-number-item-number tn-color-white">{{info.follow_num}}</view>
            <view class="user-number-item-title tn-color-white">关注</view>
          </view>
        </view>
        <!-- <view class="user-number-item-edit">
          <text class="tn-icon-add-fill tn-color-white" style="font-size: 40rpx;" @click="tn('/minePages/set')"></text>
        </view> -->
      </view>
	  </view>
      <!-- 悬浮按钮-->
      <!-- <view class="tn-flex tn-flex-row-between" style="padding: 60rpx 0 30rpx 0;">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#EDC454" padding="40rpx 0" width="90%" shadow fontBold>
            <text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
            <text class="tn-color-black">关 注</text>
          </tn-button>
        </view>
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#EDC454" padding="40rpx 0" width="90%" shadow fontBold open-type="share">
            <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
            <text class="tn-color-black">分 享</text>
          </tn-button>
        </view>
      </view> -->
      <!-- <view class="tn-flex tn-flex-row-between tn-padding-top-lg">
        <view class="tn-flex-3 tn-padding tn-margin-left-sm">
          <view class="tn-flex">
            <view class="tn-flex tn-flex-row-center tn-flex-col-center">
              <view class="tn-padding-right tn-text-ellipsis tn-text-left">
                <view class="tn-padding-right tn-color-black tn-text-bold tn-text-xxl">
                  放点东西在这里
                </view>
                <view class="tn-padding-right tn-padding-top tn-text-df">写点什么来着</view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="tn-flex-1 justify-content-item tn-padding tn-text-center">
          <view class="">
            <text class="tn-icon-qr-beibei" style="font-size: 70rpx;"></text>
          </view>
          <view class=" tn-padding-top-xs">
            入 群
          </view>
        </view>
      </view> -->
      
      <view class="reserve-content">
		  <view class="input-box">
		  <block>
		    <view class="tn-text">
		      智能体简介
		    </view>
		    <view class="tn-text2">
		      {{info.description}}
		    </view>
		  </block>
		  </view>
		  
		  <view class="input-box">
		  <block>
		    <view class="tn-text">
		      智能体开场白
		    </view>
		    <view class="tn-text2">
		      {{info.timbre}}
		    </view>
		  </block>
		  </view>
		  
		  <view class="input-box">
		  <block>
		    <view class="tn-text">
		      智能体音色
		    </view>
		    <view class="tn-text2">
		      {{info.timbrename}}
		    </view>
		  </block>
		  </view>
		  
		  <!-- <view class="input-box"> -->
		  <block>
		  <tn-button shape="round" backgroundColor="#616DBA" padding="40rpx 0" width="100%" :fontSize="32" fontBold
		    @click="goBack">
		    <text class="tn-color-grey-dark tn-color-white">返 回 聊 天</text>
		  </tn-button>
		  </block>
		  <!-- </view> -->
      </view>

    </view>
    
    
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateGroup',
    mixins: [template_page_mixin],
    data(){
      return {
        show1: false,
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          url: '/static/mybj.png',
        }],
        content: null,
        /* 导航*/
        navBarRectInfo: {},
        navBarChangebaseLineHeight: 0,
        navBarStyle: {
          color:'#FFFFFF',
          opacity: 1,
          display: 'flex'
        },
        navBarStyle2: {
          color:'rgba(255,255,255,0)',
          opacity: 1,
          display: 'flex'
        },
        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
        activeBgAnimation: {},
		info: {
			userid: null,
			user_head: null,
			nickname: null,
			description: null
		},
		userInfo: uni.getStorageSync('userInfo') || null,
		timbre: [ {
		  id: 1,
		  name: '爽快思思/Skye',
		  type: 'zh_female_shuangkuaisisi_moon_bigtts',
				isPlay: false
		}, {
		  id: 2,
		  name: '温暖阿虎/Alvin',
		  type: 'zh_male_wennuanahu_moon_bigtts',
				isPlay: false
		}, {
		  id: 3,
		  name: '少年梓辛/Brayan',
		  type: 'zh_male_shaonianzixin_moon_bigtts',
				isPlay: false
		}, {
		  id: 4,
		  name: '邻家女孩',
		  type: 'zh_female_linjianvhai_moon_bigtts',
				isPlay: false
		}, {
		  id: 5,
		  name: '渊博小叔',
		  type: 'zh_male_yuanboxiaoshu_moon_bigtts',
				isPlay: false
		}, {
		  id: 6,
		  name: '阳光青年',
		  type: 'zh_male_yangguangqingnian_moon_bigtts',
				isPlay: false
		}, {
		  id: 7,
		  name: '甜美小源',
		  type: 'zh_female_tianmeixiaoyuan_moon_bigtts',
				isPlay: false
		}, {
		  id: 8,
		  name: '清澈梓梓',
		  type: 'zh_female_qingchezizi_moon_bigtts',
				isPlay: false
		}, {
		  id: 9,
		  name: '解说小明',
		  type: 'zh_male_jieshuoxiaoming_moon_bigtts',
				isPlay: false
		}, {
		  id: 10,
		  name: '开朗姐姐',
		  type: 'zh_female_kailangjiejie_moon_bigtts',
				isPlay: false
		}, {
		  id: 11,
		  name: '邻家男孩',
		  type: 'zh_male_linjiananhai_moon_bigtts',
				isPlay: false
		}, {
		  id: 12,
		  name: '甜美悦悦',
		  type: 'zh_female_tianmeiyueyue_moon_bigtts',
				isPlay: false
		}, {
		  id: 13,
		  name: '心灵鸡汤',
		  type: 'zh_female_xinlingjitang_moon_bigtts',
				isPlay: false
		}, {
		  id: 14,
		  name: '京腔侃爷/Harmony',
		  type: 'zh_male_jingqiangkanye_moon_bigtts',
				isPlay: false
		}, {
		  id: 15,
		  name: '湾湾小何',
		  type: 'zh_female_wanwanxiaohe_moon_bigtts',
				isPlay: false
		}, {
		  id: 16,
		  name: '湾区大叔',
		  type: 'zh_female_wanqudashu_moon_bigtts',
				isPlay: false
		}, {
		  id: 17,
		  name: '呆萌川妹',
		  type: 'zh_female_daimengchuanmei_moon_bigtts',
				isPlay: false
		}, {
		  id: 18,
		  name: '广州德哥',
		  type: 'zh_male_guozhoudege_moon_bigtts',
				isPlay: false
		}, {
		  id: 19,
		  name: '北京小爷',
		  type: 'zh_male_beijingxiaoye_moon_bigtts',
				isPlay: false
		}, {
		  id: 20,
		  name: '浩宇小哥',
		  type: 'zh_male_haoyuxiaoge_moon_bigtts',
				isPlay: false
		}, {
		  id: 21,
		  name: '广西远舟',
		  type: 'zh_male_guangxiyuanzhou_moon_bigtts',
				isPlay: false
		}, {
		  id: 22,
		  name: '妹坨洁儿',
		  type: 'zh_female_meituojieer_moon_bigtts',
				isPlay: false
		}, {
		  id: 23,
		  name: '豫州子轩',
		  type: 'zh_male_yuzhouzixuan_moon_bigtts',
				isPlay: false
		}, {
		  id: 24,
		  name: '高冷御姐',
		  type: 'zh_female_gaolengyujie_moon_bigtts',
				isPlay: false
		}, {
		  id: 25,
		  name: '傲娇霸总',
		  type: 'zh_male_aojiaobazong_moon_bigtts',
				isPlay: false
		}, {
		  id: 26,
		  name: '魅力女友',
		  type: 'zh_female_meilinvyou_moon_bigtts',
				isPlay: false
		}, {
		  id: 27,
		  name: '深夜播客',
		  type: 'zh_male_shenyeboke_moon_bigtts',
				isPlay: false
		}, {
		  id: 28,
		  name: '柔美女友',
		  type: 'zh_female_sajiaonvyou_moon_bigtts',
				isPlay: false
		}, {
		  id: 29,
		  name: '撒娇学妹',
		  type: 'zh_female_yuanqinvyou_moon_bigtts',
				isPlay: false
		}, {
		  id: 30,
		  name: '病弱少女',
		  type: 'ICL_zh_female_bingruoshaonv_tob',
				isPlay: false
		}, {
		  id: 31,
		  name: '活泼女孩',
		  type: 'ICL_zh_female_huoponvhai_tob',
				isPlay: false
		}, {
		  id: 32,
		  name: '和蔼奶奶',
		  type: 'ICL_zh_female_heainainai_tob',
				isPlay: false
		}, {
		  id: 33,
		  name: '邻居阿姨',
		  type: 'ICL_zh_female_linjuayi_tob',
				isPlay: false
		}, {
		  id: 34,
		  name: '温柔小雅',
		  type: 'zh_female_wenrouxiaoya_moon_bigtts',
				isPlay: false
		}, {
		  id: 35,
		  name: '东方浩然',
		  type: 'zh_male_dongfanghaoran_moon_bigtts',
				isPlay: false
		}, {
		  id: 36,
		  name: '灿灿/Shiny',
		  type: 'zh_female_cancan_mars_bigtts',
				isPlay: false
		}, {
		  id: 37,
		  name: '清新女声',
		  type: 'zh_female_qingxinnvsheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 38,
		  name: '邻家小妹/Lily',
		  type: 'zh_female_linjia_mars_bigtts',
				isPlay: false
		}, {
		  id: 39,
		  name: '知性女声',
		  type: 'zh_female_zhixingnvsheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 40,
		  name: '清爽男大',
		  type: 'zh_male_qingshuangnanda_mars_bigtts',
				isPlay: false
		}, {
		  id: 41,
		  name: '知性温婉',
		  type: 'ICL_zh_female_zhixingwenwan_tob',
				isPlay: false
		}, {
		  id: 42,
		  name: '暖心体贴',
		  type: 'ICL_zh_male_nuanxintitie_tob',
				isPlay: false
		}, {
		  id: 43,
		  name: '温柔文雅',
		  type: 'ICL_zh_female_wenrouwenya_tob',
				isPlay: false
		}, {
		  id: 44,
		  name: '开朗轻快',
		  type: 'ICL_zh_male_kailangqingkuai_tob',
				isPlay: false
		}, {
		  id: 45,
		  name: '活泼爽朗',
		  type: 'ICL_zh_male_huoposhuanglang_tob',
				isPlay: false
		}, {
		  id: 46,
		  name: '率真小伙',
		  type: 'ICL_zh_male_shuaizhenxiaohuo_tob',
				isPlay: false
		}, {
		  id: 47,
		  name: '奶气萌娃',
		  type: 'zh_male_naiqimengwa_mars_bigtts',
				isPlay: false
		}, {
		  id: 48,
		  name: '婆婆',
		  type: 'zh_female_popo_mars_bigtts',
				isPlay: false
		}, {
		  id: 49,
		  name: '绿茶小哥',
		  type: 'ICL_zh_male_lvchaxiaoge_tob',
				isPlay: false
		}, {
		  id: 50,
		  name: '娇弱萝莉',
		  type: 'ICL_zh_female_jiaoruoluoli_tob',
				isPlay: false
		}, {
		  id: 51,
		  name: '冷淡疏离',
		  type: 'ICL_zh_male_lengdanshuli_tob',
				isPlay: false
		}, {
		  id: 52,
		  name: '憨厚敦实',
		  type: 'ICL_zh_male_hanhoudunshi_tob',
				isPlay: false
		}, {
		  id: 53,
		  name: '傲气凌人',
		  type: 'ICL_zh_male_aiqilingren_tob',
				isPlay: false
		}, {
		  id: 54,
		  name: '活泼刁蛮',
		  type: 'ICL_zh_female_huopodiaoman_tob',
				isPlay: false
		}, {
		  id: 55,
		  name: '固执病娇',
		  type: 'ICL_zh_male_guzhibingjiao_tob',
				isPlay: false
		}, {
		  id: 56,
		  name: '撒娇粘人',
		  type: 'ICL_zh_male_sajiaonianren_tob',
				isPlay: false
		}, {
		  id: 57,
		  name: '傲慢娇声',
		  type: 'ICL_zh_female_aomanjiaosheng_tob',
				isPlay: false
		}, {
		  id: 58,
		  name: '潇洒随性',
		  type: 'ICL_zh_male_xiaosasuixing_tob',
				isPlay: false
		}, {
		  id: 59,
		  name: '腹黑公子',
		  type: 'ICL_zh_male_fuheigongzi_tob',
				isPlay: false
		}, {
		  id: 60,
		  name: '诡异神秘',
		  type: 'ICL_zh_male_guiyishenmi_tob',
				isPlay: false
		}, {
		  id: 61,
		  name: '儒雅才俊',
		  type: 'ICL_zh_male_ruyacaijun_tob',
				isPlay: false
		}, {
		  id: 62,
		  name: '病娇白莲',
		  type: 'ICL_zh_male_bingjiaobailian_tob',
				isPlay: false
		}, {
		  id: 63,
		  name: '正直青年',
		  type: 'ICL_zh_male_zhengzhiqingnian_tob',
				isPlay: false
		}, {
		  id: 64,
		  name: '娇憨女王',
		  type: 'ICL_zh_female_jiaohannvwang_tob',
				isPlay: false
		}, {
		  id: 65,
		  name: '病娇萌妹',
		  type: 'ICL_zh_female_bingjiaomengmei_tob',
				isPlay: false
		}, {
		  id: 66,
		  name: '青涩小生',
		  type: 'ICL_zh_male_qingsenaigou_tob',
				isPlay: false
		}, {
		  id: 67,
		  name: '纯真学弟',
		  type: 'ICL_zh_male_chunzhenxuedi_tob',
				isPlay: false
		}, {
		  id: 68,
		  name: '暖心学姐',
		  type: 'ICL_zh_female_nuanxinxuejie_tob',
				isPlay: false
		}, {
		  id: 69,
		  name: '可爱女生',
		  type: 'ICL_zh_female_keainvsheng_tob',
				isPlay: false
		}, {
		  id: 70,
		  name: '成熟姐姐',
		  type: 'ICL_zh_female_chengshujiejie_tob',
				isPlay: false
		}, {
		  id: 71,
		  name: '病娇姐姐',
		  type: 'ICL_zh_female_bingjiaojiejie_tob',
				isPlay: false
		}, {
		  id: 72,
		  name: '优柔帮主',
		  type: 'ICL_zh_male_youroubangzhu_tob',
				isPlay: false
		}, {
		  id: 73,
		  name: '优柔公子',
		  type: 'ICL_zh_male_yourougongzi_tob',
				isPlay: false
		}, {
		  id: 74,
		  name: '妩媚御姐',
		  type: 'ICL_zh_female_wumeiyujie_tob',
				isPlay: false
		}, {
		  id: 75,
		  name: '调皮公主',
		  type: 'ICL_zh_female_tiaopigongzhu_tob',
				isPlay: false
		}, {
		  id: 76,
		  name: '傲娇女友',
		  type: 'ICL_zh_female_aojiaonvyou_tob',
				isPlay: false
		}, {
		  id: 77,
		  name: '贴心男友',
		  type: 'ICL_zh_male_tiexinnanyou_tob',
				isPlay: false
		}, {
		  id: 78,
		  name: '少年将军',
		  type: 'ICL_zh_male_shaonianjiangjun_tob',
				isPlay: false
		}, {
		  id: 79,
		  name: '贴心女友',
		  type: 'ICL_zh_female_tiexinnvyou_tob',
				isPlay: false
		}, {
		  id: 80,
		  name: '病娇哥哥',
		  type: 'ICL_zh_male_bingjiaogege_tob',
				isPlay: false
		}, {
		  id: 81,
		  name: '学霸男同桌',
		  type: 'ICL_zh_male_xuebanantongzhuo_tob',
				isPlay: false
		}, {
		  id: 82,
		  name: '幽默叔叔',
		  type: 'ICL_zh_male_youmoshushu_tob',
				isPlay: false
		}, {
		  id: 83,
		  name: '性感御姐',
		  type: 'ICL_zh_female_xingganyujie_tob',
				isPlay: false
		}, {
		  id: 84,
		  name: '假小子',
		  type: 'ICL_zh_female_jiaxiaozi_tob',
				isPlay: false
		}, {
		  id: 85,
		  name: '冷峻上司',
		  type: 'ICL_zh_male_lengjunshangsi_tob',
				isPlay: false
		}, {
		  id: 86,
		  name: '温柔男同桌',
		  type: 'ICL_zh_male_wenrounantongzhuo_tob',
				isPlay: false
		}, {
		  id: 87,
		  name: '病娇弟弟',
		  type: 'ICL_zh_male_bingjiaodidi_tob',
				isPlay: false
		}, {
		  id: 88,
		  name: '幽默大爷',
		  type: 'ICL_zh_male_youmodaye_tob',
				isPlay: false
		}, {
		  id: 89,
		  name: '傲慢少爷',
		  type: 'ICL_zh_male_aomanshaoye_tob',
				isPlay: false
		}, {
		  id: 90,
		  name: '神秘法师',
		  type: 'ICL_zh_male_shenmifashi_tob',
				isPlay: false
		}, {
		  id: 91,
		  name: '天才童声',
		  type: 'zh_male_tiancaitongsheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 92,
		  name: '猴哥',
		  type: 'zh_male_sunwukong_mars_bigtts',
				isPlay: false
		}, {
		  id: 93,
		  name: '熊二',
		  type: 'zh_male_xionger_mars_bigtts',
				isPlay: false
		}, {
		  id: 94,
		  name: '佩奇猪',
		  type: 'zh_female_peiqi_mars_bigtts',
				isPlay: false
		}, {
		  id: 95,
		  name: '武则天',
		  type: 'zh_female_wuzetian_mars_bigtts',
				isPlay: false
		}, {
		  id: 96,
		  name: '顾姐',
		  type: 'zh_female_gujie_mars_bigtts',
				isPlay: false
		}, {
		  id: 97,
		  name: '樱桃丸子',
		  type: 'zh_female_yingtaowanzi_mars_bigtts',
				isPlay: false
		}, {
		  id: 98,
		  name: '广告解说',
		  type: 'zh_male_chunhui_mars_bigtts',
				isPlay: false
		}, {
		  id: 99,
		  name: '少儿故事',
		  type: 'zh_female_shaoergushi_mars_bigtts',
				isPlay: false
		}, {
		  id: 100,
		  name: '四郎',
		  type: 'zh_male_silang_mars_bigtts',
				isPlay: false
		}, {
		  id: 101,
		  name: '磁性解说男声/Morgan',
		  type: 'zh_male_jieshuonansheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 102,
		  name: '鸡汤妹妹/Hope',
		  type: 'zh_female_jitangmeimei_mars_bigtts',
				isPlay: false
		}, {
		  id: 103,
		  name: '贴心女声/Candy',
		  type: 'zh_female_tiexinnvsheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 104,
		  name: '俏皮女声',
		  type: 'zh_female_qiaopinvsheng_mars_bigtts',
				isPlay: false
		}, {
		  id: 105,
		  name: '萌丫头/Cutey',
		  type: 'zh_female_mengyatou_mars_bigtts',
				isPlay: false
		}, {
		  id: 106,
		  name: '悬疑解说',
		  type: 'zh_male_changtianyi_mars_bigtts',
				isPlay: false
		}, {
		  id: 107,
		  name: '儒雅青年',
		  type: 'zh_male_ruyaqingnian_mars_bigtts',
				isPlay: false
		}, {
		  id: 108,
		  name: '霸气青叔',
		  type: 'zh_male_baqiqingshu_mars_bigtts',
				isPlay: false
		}, {
		  id: 109,
		  name: '擎苍',
		  type: 'zh_male_qingcang_mars_bigtts',
				isPlay: false
		}, {
		  id: 110,
		  name: '活力小哥',
		  type: 'zh_male_yangguangqingnian_mars_bigtts',
				isPlay: false
		}, {
		  id: 111,
		  name: '古风少御',
		  type: 'zh_female_gufengshaoyu_mars_bigtts',
				isPlay: false
		}, {
		  id: 112,
		  name: '温柔淑女',
		  type: 'zh_female_wenroushunv_mars_bigtts',
				isPlay: false
		}],
      }
    },
	created(e) {
		console.log("created:",e.showUid);
		this.info.userid = e.showUid;
		this.getInfo();
		console.log(e.showUid);
	},
	onLoad(e) {
		console.log("onLoad:",e.showUid);
		this.info.userid = e.showUid;
		this.getInfo();
		console.log(e.showUid);
	},
	onShow(e) {
		console.log("onShow:",e.showUid);
		this.info.userid = e.showUid;
		this.getInfo();
		console.log(e.showUid);
	},
    onReady() {
      this.$nextTick(() => {
        this.initNavBarRectInfo()
      })
    },
    onPageScroll() {
      this.updateNavBarRectInfo()
    },
    methods: {
		getInfo(){
			// let formData = {
			//   userid: this.info.userid,
			// };
			// this.$Request.postApi("/index.php?m=user&a=info&ajax=1&ajax=1", formData).then((res) => {
			// 	if (res.error == 0) {
			// 		// uni.setStorageSync('userInfo', this.info);
			// 		this.info = res.data.data;
			// 	} else {
			// 		uni.showModal({
			// 			showCancel: false,
			// 			title: '获取数据失败',
			// 			content: res.message,
			// 		});
			// 	}
			// });  
			let formData = {
				zsid: this.info.userid
			};
			this.$Request.getApi("/module.php?m=aichat_zhushou&a=show&ajax=1",formData).then(async (res) => {
					if (res.error == 0) {
						this.info = res.data.data;
						this.swiperList[0].url = res.data.data.imgurl;
						
						this.timbre.forEach((timbre, index) => {
							  if(this.timbre[index].type == res.data.data.content){
								  this.info.timbrename = this.timbre[index].name;
							  }
						});
						// this.zhushou = res.data.data;
						// this.role_name = res.data.data.title;
						// this.role_desc = res.data.data.description;
						// this.voiceId = res.data.data.content;
						// this.showTimbre = res.data.data.timbre;
					}
			});
		},
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
	  myfocus(id,mytype){
	  	var that = this;
	  	if(mytype == 1){
	  		uni.showModal({
	  			title: '提示',
	  			content: '是否确定收藏智能体?',
	  			success: function(res) {
	  				if (res.confirm) {
	  					let formData = {
	  						zsid: id,
	  						userid: that.userInfo.userid,
	  						type: mytype
	  					};
	  					that.$Request.postApi("/module.php?m=aichat_zhushou_user&a=use&ajax=1", formData).then((res) => {
	  						if (res.error == 0) {
	  							uni.showToast({
	  							title: '收藏成功',
	  							icon: 'none',
	  							duration: 1000
	  							});
	  							that.getAllData();
	  						} else {
	  							uni.showModal({
	  								showCancel: false,
	  								title: '收藏失败',
	  								content: res.message,
	  							});
	  						}
	  					});
	  				} else if (res.cancel) {
	  					console.log('用户点击取消');
	  				}
	  			}
	  		});
	  	}else{
	  		uni.showModal({
	  			title: '提示',
	  			content: '是否确定取消收藏智能体?',
	  			success: function(res) {
	  				if (res.confirm) {
	  					let formData = {
	  						zsid: id,
	  						userid: that.userInfo.userid,
	  						type: mytype
	  					};
	  					that.$Request.postApi("/module.php?m=aichat_zhushou_user&a=use&ajax=1", formData).then((res) => {
	  						if (res.error == 0) {
	  							uni.showToast({
	  							title: '取消收藏成功',
	  							icon: 'none',
	  							duration: 1000
	  							});
	  							that.getAllData();
	  						} else {
	  							uni.showModal({
	  								showCancel: false,
	  								title: '取消收藏失败',
	  								content: res.message,
	  							});
	  						}
	  					});
	  				} else if (res.cancel) {
	  					console.log('用户点击取消');
	  				}
	  			}
	  		});
	  	}
	  },
      // 预览圈子管理员微信图片
      previewQRCodeImage() {
        wx.previewImage({
          urls: ['https://resource.tuniaokj.com/images/advertise/qrcode.jpg']
        })
      },
      // 弹出模态框
      showModal(event) {
        this.openModal()
      },
      // 打开模态框
      openModal() {
        this.show1 = true
      },
      // 初始化导航栏信息
      async initNavBarRectInfo() {
        const navBarRectInfo = await this._tGetRect('#navbar')
        const pageTipsRectInfo = await this._tGetRect('#page_tips')
        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
          setTimeout(() => {
            this.initNavBarRectInfo()
          }, 10)
          return
        }
        this.navBarRectInfo = {
          top: navBarRectInfo.top
        }
        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
      },
      // 更新导航栏信息
      updateNavBarRectInfo() {
        this._tGetRect('#page_tips').then((res) => {
          const top = res?.top || 0
          if (!top) {
            return
          }
          const differHeight = top - this.navBarRectInfo.top
          const opacity = differHeight / this.navBarChangebaseLineHeight
          if (opacity < 0) {
            // this.navBarStyle.opacity = 1
            // this.navBarStyle.display = 'flex'
            this.navBarStyle.color = `rgba(0, 0, 0, 1)`
            this.navBarStyle2.color = `rgba(0, 0, 0, 1)`
            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
          } else {
            // this.navBarStyle.opacity = 1 - opacity
            // this.navBarStyle.display = 'flex'
            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
            this.navBarStyle2.color = `rgba(255, 255, 255, ${1 - opacity})`
            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
          }
          
          // console.log(top, differHeight, opacity);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    // color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.05;
      background-color: #000000;
    }
  }
  
  
  /* 轮播视觉差 start */
  .card-swiper {
    height: 800rpx !important;
	position: relative;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    // padding: 0rpx 30rpx 90rpx 30rpx;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
    height: 100%;
	background-size: cover; /* 背景图覆盖整个容器 */
	overflow: hidden;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    opacity: 0;
  }
  
  .spot{
    background-color: #FFFFFF;
    opacity: 0.6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -60rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 1;
    width: 30rpx;
    background-color: #FFFFFF;
  }
  
  /* 顶部店铺 */
  .shop-function {
      position: relative;
      z-index: 1;
      margin-top: -210rpx;
      padding-bottom: 100rpx;
      background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.01));
	  border-radius: 10%;
  }
  
  /* 阴影 start*/
  .group-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(255, 255, 255, 0.1);
  }
  
  /* 头像 start */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  /* 内容*/
  .group-wrap {
    position: relative;
    z-index: 1;
    // padding: 20rpx 30rpx;
    margin-top: -130rpx;  
    margin-bottom: 40rpx;
	border-radius: 30rpx 30rpx 0 0;
  }
  
  .reserve-content{
	width: 100%;
	height: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #414B8C);
    border-radius: 30rpx;
  }
  
  .input-box {
    background-color: #282a2e;
    margin: 15px 17px;
    border-radius: 15px;
    padding: 15px 0;
  
    .tn-text {
      padding: 5px 10px 0px 15px;
      color: #FFFFFF;
      font-size: 16px;
    }
	
	.tn-text2 {
	  padding: 5px 10px 0px 15px;
	  color: #bebebe;
	  font-size: 12px;
	}
  
    .tn-text1 {
      padding: 5px;
      color: #FFFFFF;
      font-size: 16px;
    }
  
    .tn-bg-gray--light {
      background-color: #ffffff !important;
    }
  
    .input-placeholder {
      font-size: 13px;
      color: #C6D1D8;
    }
  
    .topic__info__item__input {
      color: #fff;
      padding-left: 10px;
    }
  
    .topic__info__item__input {
      margin-top: 15px;
      margin-bottom: 15px;
    }
  
    .select-content {
      display: flex;
      align-items: center;
      margin-top: 10px;
  
      .select-content-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        width: 72px;
        height: 35px;
        border-radius: 24px;
        border: 0.5px solid #ccc;
        margin-right: 10px;
      }
  
      .select-content-item-active {
        border: 1px solid #EDC454;
        color: #EDC454;
      }
    }
  
  
  }
  
  .input-box-padding {
    padding: 15px 10px;
  }
  
  .input-box-padding2 {
    padding: 15px 10px;
    padding-bottom: 100px;
  }
  
  .bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background-color: #414B8C;
  }
  
  .user-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12rpx 10rpx;
    padding: 12rpx 24rpx;
  
    .user-number-item-content {
      display: flex;
      align-items: center;
      text-align: center;
  
      .user-number-item {
        padding-right: 60rpx;
  
        .user-number-item-number {
          font-weight: 500;
        }
  
        .user-number-item-title {
          font-size: 26rpx;
          color: #5d5d5f;
        }
      }
    }
  
    .user-number-item-edit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      background-color: #313134;
      border-radius: 50%;
    }
  }
  
  /* 文章内容 start*/
    .blogger {
      &__item {
        padding: 30rpx;
      }
      
      &__author {
        &__btn {
          margin-right: -12rpx;
          opacity: 0.5;
        }
      }
      
      &__desc {
        line-height: 55rpx;
        
        &__label {
          padding: 0 20rpx;
          margin: 0rpx 18rpx 0 0;
          
          &--prefix {
            color: #00FFC8;
            padding-right: 10rpx;
          }
        }
        &__content {
          
        }
      }
      
      &__content {
        margin-top: 18rpx;
        padding-right: 18rpx;
        
        &__data {
          line-height: 46rpx;
          text-align: justify;
          overflow: hidden;
          transition: all 0.25s ease-in-out;
          will-change: transform;
  
        }
        
        &__status {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #82B2FF;
        }
      }
      
      &__main-image {
        border-radius: 16rpx;
        
        &--1 {
          max-width: 80%;
          max-height: 300rpx;
        }
        
        &--2 {
          max-width: 260rpx;
          max-height: 260rpx;
        }
        
        &--3 {
          height: 212rpx;
          width: 100%;
        }
      }
      
      &__count-icon {
        font-size: 40rpx;
        padding-right: 5rpx;
      }
      
      &__ad {
        width: 100%;
        height: 500rpx;
        transform: translate3d(0px, 0px, 0px) !important;
        
        ::v-deep .uni-swiper-slide-frame {
          transform: translate3d(0px, 0px, 0px) !important;
        }
        .uni-swiper-slide-frame {
          transform: translate3d(0px, 0px, 0px) !important;
        }
        
        &__item {
          position: absolute;
          width: 100%;
          height: 100%;
          transform-origin: left center;
          transform: translate3d(100%, 0px, 0px) scale(1) !important;
          transition: transform 0.25s ease-in-out;
          will-change: transform;
          z-index: 1;
          
          &--0 {
            transform: translate3d(0%, 0px, 0px) scale(1) !important;
            z-index: 4;
          }
          &--1 {
            transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
            z-index: 3;
          }
          &--2 {
            transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
            z-index: 2;
          }
        }
        
        &__content {
          border-radius: 40rpx;
          width: 640rpx;
          height: 500rpx;
          overflow: hidden;
        }
        
        &__image {
          width: 100%;
          height: 100%;
        }
      }
    }
    /* 文章内容 end*/
  
  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
</style>
